<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文档加载事件监听(Document loading event monitoring)</title>
  <!-- 
  在JavaScript中，文档加载事件监控是指通过事件监听器来处理网页加载过程中的不同阶段。这些事件可以帮助开发者在文档完全加载后执行特定的代码，从而确保操作的安全性和有效性。
  一、常见的文档加载事件
  1. DOMContentLoaded 事件：
    - 当初始的 HTML 文档被完全加载和解析完成后触发，但在样式表、图像和子框架等其他资源加载完成之前。适合在 DOM 结构可用时执行脚本，而无需等待所有资源加载。
    document.addEventListener('DOMContentLoaded', function() {
      console.log('DOM 已经完全加载和解析！');
    });
  2. load 事件：
    - 当整个页面及所有依赖的资源（如样式表和图像）都已加载完成时触发。适合在所有资源准备好后执行脚本。
    window.addEventListener('load', function() {
      console.log('所有资源（包括样式表和图像）都已加载完成！');
    });
  3. beforeunload 事件：
    - 当用户尝试离开当前页面时触发。可以用于提示用户保存未保存的更改。
    window.addEventListener('beforeunload', function(event) {
      event.preventDefault(); // 标准化行为
      event.returnValue = ''; // 某些浏览器需要设置这个属性
    });
  4. unload 事件：
    - 当用户离开当前页面时触发。可以用于清理资源或保存数据。
    window.addEventListener('unload', function() {
      console.log('用户已离开页面！');
    });

  二、事件的使用场景
  1. 初始化操作：
    - 在 DOMContentLoaded 事件中，可以初始化页面中的交互元素，如事件监听器、动态内容加载等。
    document.addEventListener('DOMContentLoaded', function() {
      const button = document.getElementById('myButton');
      button.addEventListener('click', function() {
        alert('按钮被点击！');
      });
    });
  2. 资源加载后的操作：
    - 在 load 事件中，可以进行需要依赖于完整页面加载的操作，如动画效果、数据渲染等。
    window.addEventListener('load', function() {
      const banner = document.getElementById('banner');
      banner.style.display = 'block'; // 页面加载完毕后显示横幅
    });
  3. 用户离开页面的提示： 使用 beforeunload 事件可以提示用户在离开页面前保存未保存的更改。
    let isFormDirty = false; // 表单是否被修改
    const form = document.getElementById('myForm');
    form.addEventListener('change', function() {
      isFormDirty = true; // 用户修改了表单
    });

    window.addEventListener('beforeunload', function(event) {
      if (isFormDirty) {
        event.preventDefault();
        event.returnValue = ''; // 提示用户确认离开
      }
    });

  三、总结
  - 文档加载事件监控是 JavaScript 中处理网页加载过程的重要机制。
  - 主要的事件包括 DOMContentLoaded（DOM 完全加载）、load（所有资源加载完成）和 beforeunload（用户离开页面的提示）。
  - 这些事件可以用于初始化操作、资源加载后的处理以及用户离开页面的确认提示，提升用户体验和页面性能。
   -->
  <style>
    .dom-content-loaded {
      width: 200px;
      height: 200px;
      border: 1px solid red;
    }
  </style>
</head>
<body>

  <script>

    // 1. DOMContentLoaded 事件
    // 当初始的 HTML 文档被完全加载和解析完成，DOMContentLoaded 事件被触发，无需等待样式表、图像和子框架的加载完成。
    document.addEventListener('DOMContentLoaded', function() {
      console.log('DOM fully loaded and parsed');
    });

    // 2. load 事件
    // 当整个页面及所有依赖资源（如样式表和图片）完全加载完成后，load 事件被触发。
    window.addEventListener('load', function() {
      console.log('Page fully loaded');
    });

    // 3. resize 事件
    window.onresize = function() {
      console.log("resize-创建大小发生改变时");
    }
    
  </script>

  <div class="dom-content-loaded">
    <p>文档加载事件监听(Document loading event monitoring)</p>
  </div>
  <img src="../../../01_html-css/images/diqiu.jpg" alt="">
  
</body>
</html>